<template>
  <div id="left">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="flag"
      background-color="#3186cb"
      text-color="#000"
      menu-trigger="click"
      router
    >
      <!-- 动态生成菜单项 -->
      <el-submenu v-for="(item, index) in menu" :index="item.index" :key="item.index">
        <template #title>
          <div class="left-width">
            <i class="iconfont" :class="item.icon"></i>
            <span class="title">{{ item.title }}</span>
          </div>
        </template>
        <el-menu-item-group v-for="(list, idx) in item.content" :key="idx">
          <el-menu-item
            v-if="list.item1"
            :index="list.path"
            @click="handleTitle(item.index)"
            style="color:white;"
          >
            {{ list.item1 }}
          </el-menu-item>
          <el-menu-item
            v-if="list.item2"
            :index="list.path"
            @click="handleTitle(item.index)"
            style="color:white;"
          >
            {{ list.item2 }}
          </el-menu-item>
          <el-menu-item
            v-if="list.item3"
            :index="list.path"
            @click="handleTitle(item.index)"
            style="color:white;"
          >
            {{ list.item3 }}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: "MainLeft",
  computed: mapState(["flag", "menu"]),
  created() {
    this.addData();
  },
  methods: {
    handleOpen(key, keyPath) {
      // 菜单展开事件
    },
    handleClose(key, keyPath) {
      // 菜单关闭事件
    },
    handleTitle(index) {
      // 通过事件总线发送菜单索引给navigator组件
      if (this.bus) {
        this.bus.$emit('sendIndex', index);
      }
    },
    addData() {
      let role = this.$cookies ? this.$cookies.get("role") : null;
      if (role == 0 && this.menu && !this.menu.find(m => m.index === '5')) {
        this.menu.push({
          index: '5',
          title: '教师管理',
          icon: 'icon-Userselect',
          content: [
            { item1: '教师管理', path: '/teacherManage' },
            { item2: '添加教师', path: '/addTeacher' }
          ],
        });
      }
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 200px;
  min-height: 100vh;
}
.left-width .iconfont {
  font-size: 18px;
  color: #fff;
}
.left-width {
  width: 213px;
}
.title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-left: 14px;
}
</style>
